<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>购物车</title>
	<link rel="stylesheet" href="css/style.css">
	<script src="./js/data.js"></script>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
	<div id="app">
	</div>
	<template id="root">
		<div id="shopcart" class="shop-cart">
			<div class="tabs">
				<div class="border">
					<!-- data-*表示自定义属性。 -->
					<div class="title active" data-index="0">
						全部商品
						<span class="count">3</span>
					</div>
					<div class="title" data-index="1">
						降价商品
						<span class="count">0</span>
					</div>
					<div class="title last" data-index="2">
						库存紧张
						<span class="count">0</span>
					</div>
					<div class="line"></div>
				</div>
			</div>

			<div class="lists">
				<div class="header">
					<ul class="clearfix">
						<li>
							<input type="checkbox" class="select-all" v-model="chcekAll">
							<label>全选</label>
						</li>
						<li class="product-info">商品信息</li>
						<li>单价</li>
						<li>数量</li>
						<li>金额</li>
						<li>操作</li>
					</ul>
				</div>
				<div id="shoplist" class="shoplist">
					<!-- 店铺内容及样式参考 -->
					<div class="shop" v-for="(shop,index1) in shopcarts">
						<div class="shop-info">
							<input type="checkbox" v-model="{{shop.isChecked}}" @click="checkShopTip(shop,index1)">
							<span class="shop-tip">店铺：</span>
							<a class="shop-name" href="#">{{shop.shopName}}</a>
							<a href="#" class="wangwang">旺旺</a>
						</div>
						<div class="products">
							<div class="item" v-for="(item,index2) in shop.products">
								<div class="select-logo">
									<input type="checkbox" v-model="item.isChecked">
									<img :src="item.topImg" alt="产品logo">
								</div>
								<div class="product-detail">
									<div class="left">
										<a href="#" class="product-name">
											{{item.productName}}
										</a>
										<div class="logos">
											<a href="#" class="card">信用卡</a>
											<a href="#" class="service">保障服务</a>
											<a href="#" class="order">订单险</a>
											<a href="#" class="seven">7天无理由</a>
										</div>
									</div>
									<div class="right" v-html="item.spec">
									</div>
								</div>
								<div class="price">
									<p class="market-price">￥{{item.marketPrice}}</p>
									<p class="real-price">￥{{item.price}}</p>
								</div>
								<div class="count">
									<span class="sub" @click="decrease(item)">-</span>
									<span class="input"><input type="text" v-model="item.count"></span>
									<span class="add" @click="increase(item)">+</span>
								</div>
								<div class="amount">￥{{item.price*item.count}}</div>
								<div class="delete">
									<a href="#" @click="del(shop,index1,index2)">删除</a>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
			<div class="operate">
				<div class="left">
					<input type="checkbox" class="select-all-footer">
					<a href="javascript:void(0);">删除</a>
				</div>

				<div class="right">
					<div>已选择商品<span class="selected-count">0</span>件</div>
					<div class="amount">合计（不含运费）： <span class="sum">￥0.00</span></div>
					<a href="javascript:void(0);" class="settle">结算</a>
				</div>
			</div>
		</div>
	</template>
	<script>
		
		//应用实例
		const app = Vue.createApp({
			/* template:"<div>{{message}}</div>", */
			template: "#root",
			data() {
				return {
					shopcarts: shopcarts,
					checkAll: false
				}
			},
			methods: {
				increase(item) {
					return item.count++
				},
				decrease(item) {
					if (item.count > 0) {
						return item.count--
					}
				},
				del(shop, index1, index2) {
					shop.products.splice(index2, 1);
					if (shop.products.length == 0) {
						this.shopcarts.splice(index1, 1);
					}
				},
				checkShopTip(shop, index) {
					if (shop.isChecked == false) {
						shop.isChecked = true
						this.shopcarts[index].products.forEach(e => {
							e.isChecked = true
						});
					}else{
						shop.isChecked = false
						this.shopcarts[index].products.forEach(e => {
							e.isChecked = false
						});
					}
					this.shopList.filter((e)=>{
                        return e.isChecked == true
                    }).length ==this.shop.length
				}
			},
		})
		app.mount("#app")

		// 实现头部的动画
		var titles = document.querySelectorAll('.title')
		var line = document.querySelector('.line')
		for (let i = 0; i < titles.length; i++) {
			titles[i].addEventListener('mouseenter', function () {
				for (var j = 0; j < titles.length; j++) {
					titles[j].classList.remove('active')
				}
				this.classList.add('active')
				line.style.left = i * line.offsetWidth + 'px'
			})
		}
	</script>
</body>

</html>